import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import CustomTable from 'components/common/table'

// import Style from './login.css'

class login extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20
    }
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  getTableCols () {
    return [
      {
        title: '时间',
        dataIndex: 'loginTime',
        key: 'loginTime',
        width: 100
      },
      {
        title: 'IP',
        dataIndex: 'ip',
        key: 'ip',
        width: 100

      },
      {
        title: '地区',
        dataIndex: 'address',
        key: 'address',
        width: 100

      },
      {
        title: '登陆方式',
        dataIndex: 'loginType',
        key: 'loginType',
        width: 100
      }
    ]
  }

  onPageChange (pageNo, pageSize) {
    this.setState({
      pageNo
    })
    this.props.loginPageChange({
      pageNo: pageNo,
      pageSize: pageSize
    })
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    this.props.loginPageChange({
      pageNo: current,
      pageSize: pageSize
    })
  }

  render () {
    const { loginData } = this.props
    const { pageNo, pageSize } = this.state

    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: loginData && loginData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange

    }
    return (
      <div>
        <CustomTable loading={!loginData} columns={this.getTableCols()} dataSource={(loginData && loginData.list) || []} pagination={pagination} />
      </div>
    )
  }
}

login.propTypes = {
  form: PropTypes.any,
  loginData: PropTypes.any,
  loginPageChange: PropTypes.any
}

export default login
